<!-- 
  v-if 与 v-for 的优先级问题
    Vue2中 v-for > v-if
    Vue3中 v-if > v-for

  不推荐在同一个元素上，同时使用 v-for 和 v-if，会有性能问题
 -->

<template>
  <div>
    <ul>
      <li v-for="(item, index) in bigList" v-if="item.scope >= 60" :key="index">
        {{ item.name }} - {{ item.scope }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "张三", scope: 50 },
        { name: "李四", scope: 60 },
        { name: "王五", scope: 70 },
      ],
    };
  },

  computed: {
    bigList() {
      return this.list.filter((item) => item.scope >= 60);
    },
  },
};
</script>

<style>
@import "./global.css";
</style>
